<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务结果 - 后勤保障关键技术识别与预测系统</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body data-page="task-results">
    <!-- 顶部导航栏 -->
    <nav class="navbar">
        <!-- <button class="btn btn-sm btn-back">
            <svg class="menu-icon" viewBox="0 0 24 24">
                <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
            </svg>
        </button> -->
        <div class="navbar-title">任务结果</div>
        <div class="navbar-menu">
            <!-- 通知下拉菜单 -->
            <!-- <div class="navbar-dropdown">
                <button class="dropdown-btn">
                    <svg class="menu-icon" viewBox="0 0 24 24">
                        <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
                    </svg>
                    <span>通知</span>
                    <svg class="menu-icon" viewBox="0 0 24 24" width="16" height="16">
                        <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
                    </svg>
                </button>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">新的评估结果</a>
                    <a href="#" class="dropdown-item">系统更新通知</a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">查看全部</a>
                </div>
            </div> -->

            <!-- 设置下拉菜单 -->
            <!-- <div class="navbar-dropdown">
                <button class="dropdown-btn">
                    <svg class="menu-icon" viewBox="0 0 24 24">
                        <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
                    </svg>
                    <span>设置</span>
                    <svg class="menu-icon" viewBox="0 0 24 24" width="16" height="16">
                        <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
                    </svg>
                </button>
                <div class="dropdown-menu">
                    <a href="settings.html" class="dropdown-item">系统设置</a>
                    <a href="#" class="dropdown-item">账户管理</a>
                    <div class="dropdown-divider"></div>
                    <a href="login.html" class="dropdown-item">退出登录</a>
                </div>
            </div> -->

            <!-- 用户信息 -->
            <!-- <div class="navbar-user">
                <div class="user-avatar">
                    <span>张</span>
                </div>
                <div class="user-name">
                    张管理员
                </div>
            </div> -->
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <div class="container">
            <!-- 任务信息 -->
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">识别任务详情</h2>
                </div>
                <div class="form-group">
                    <label class="form-label">任务ID</label>
                    <div>20240118-001</div>
                </div>
                <div class="form-group">
                    <label class="form-label">任务名称</label>
                    <div>技术发展水平预测分析</div>
                </div>
                <div class="form-group">
                    <label class="form-label">执行时间</label>
                    <div>2024-01-18 09:00</div>
                </div>
                <div class="form-group">
                    <label class="form-label">状态</label>
                    <div><span class="status-badge status-confirmed">已完成</span></div>
                </div>
            </div>

            <!-- 分析过程 -->
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">分析过程</h2>
                </div>
                <div class="form-group">
                    <label class="form-label">任务进度</label>
                    <div class="progress-bar">
                        <div style="background-color: #2E5A3E; height: 8px; width: 100%; border-radius: 4px;"></div>
                    </div>
                    <div class="text-right">100%</div>
                </div>
                
                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
                            <label class="form-label">开始时间</label>
                            <div>2024-01-18 09:00</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label class="form-label">结束时间</label>
                            <div>2024-01-18 16:30</div>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label">执行步骤</label>
                    <div class="progress-item">
                        <div class="progress-title">数据收集</div>
                        <div class="progress-meta">
                            <span class="progress-status status-completed">已完成</span>
                            <span style="float: right;">09:00-10:30</span>
                        </div>
                    </div>
                    <div class="progress-item">
                        <div class="progress-title">模型训练</div>
                        <div class="progress-meta">
                            <span class="progress-status status-completed">已完成</span>
                            <span style="float: right;">10:30-12:00</span>
                        </div>
                    </div>
                    <div class="progress-item">
                        <div class="progress-title">预测分析</div>
                        <div class="progress-meta">
                            <span class="progress-status status-completed">已完成</span>
                            <span style="float: right;">13:00-15:00</span>
                        </div>
                    </div>
                    <div class="progress-item">
                        <div class="progress-title">结果验证</div>
                        <div class="progress-meta">
                            <span class="progress-status status-completed">已完成</span>
                            <span style="float: right;">15:00-16:30</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 识别结果统计 -->
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">识别结果统计</h2>
                </div>
                <div class="stats-container">
                    <div class="stat-card">
                        <div class="stat-value">5</div>
                        <div class="stat-label">预测技术</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">3</div>
                        <div class="stat-label">时间点</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">100%</div>
                        <div class="stat-label">准确率</div>
                    </div>
                </div>
            </div>

            <!-- 技术发展水平预测 -->
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">技术发展水平预测</h2>
                </div>
                <div class="form-group">
                    <label class="form-label">选择技术查看发展预测</label>
                    <select class="select-field" id="tech-selector">
                        <option value="adaptive-energy">自适应能量回收系统</option>
                        <option value="smart-materials">智能环境感知材料</option>
                        <option value="distributed-medical">分布式医疗诊断平台</option>
                        <option value="quantum-encryption">量子加密通信协议</option>
                        <option value="precision-navigation">高精度定位导航技术</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label class="form-label">技术成熟度发展趋势</label>
                    <div class="tech-maturity-timeline">
                        <div class="timeline-container">
                            <!-- 时间线 -->
                            <div class="timeline-bar"></div>
                            
                            <!-- 时间节点 -->
                            <div class="timeline-point current">
                                <div class="point-marker"></div>
                                <div class="point-label">当前</div>
                                <div class="point-value">TRL 3</div>
                            </div>
                            
                            <div class="timeline-point future-3y">
                                <div class="point-marker"></div>
                                <div class="point-label">3年后</div>
                                <div class="point-value">TRL 5</div>
                            </div>
                            
                            <div class="timeline-point future-5y">
                                <div class="point-marker"></div>
                                <div class="point-label">5年后</div>
                                <div class="point-value">TRL 6</div>
                            </div>
                            
                            <div class="timeline-point future-10y">
                                <div class="point-marker"></div>
                                <div class="point-label">10年后</div>
                                <div class="point-value">TRL 9</div>
                            </div>
                        </div>
                        
                        <!-- 成熟度说明 -->
                        <div class="maturity-description mt-3">
                            <div class="description-item">
                                <span class="description-label">TRL 3:</span>
                                <span class="description-text">概念验证阶段，已完成实验室环境下的功能验证</span>
                            </div>
                            <div class="description-item">
                                <span class="description-label">TRL 5:</span>
                                <span class="description-text">组件验证阶段，在相关环境中完成组件测试</span>
                            </div>
                            <div class="description-item">
                                <span class="description-label">TRL 6:</span>
                                <span class="description-text">系统验证阶段，在相关环境中完成系统测试</span>
                            </div>
                            <div class="description-item">
                                <span class="description-label">TRL 9:</span>
                                <span class="description-text">实际应用阶段，技术已在作战环境中实际部署</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label">预测依据</label>
                    <div class="prediction-basis">
                        <div class="basis-item">
                            <div class="basis-title">技术发展速度</div>
                            <div class="basis-content">根据同类技术发展历史数据分析，该技术年均成熟度提升约0.3级</div>
                        </div>
                        <div class="basis-item">
                            <div class="basis-title">研发投入</div>
                            <div class="basis-content">预计未来5年该领域研发投入将增长40%，将显著加速技术发展</div>
                        </div>
                        <div class="basis-item">
                            <div class="basis-title">应用需求</div>
                            <div class="basis-content">军事应用需求强烈，将推动技术快速向实战化转化</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 底部导航 -->
    <nav class="left-nav">
        <a href="index.html" class="nav-item" data-tab="home">
            <svg class="nav-icon" viewBox="0 0 24 24">
                <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
            </svg>
            <span>首页</span>
        </a>
        <a href="data.html" class="nav-item" data-tab="data">
            <svg class="nav-icon" viewBox="0 0 24 24">
                <path d="M19 3H5c-1.1 0-1.99.9-1.99 2v14c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/>
            </svg>
            <span>数据</span>
        </a>
        <a href="themes.html" class="nav-item" data-tab="themes">
            <svg class="nav-icon" viewBox="0 0 24 24">
                <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
            </svg>
            <span>分析</span>
        </a>
        <a href="evaluation.html" class="nav-item" data-tab="evaluation">
            <svg class="nav-icon" viewBox="0 0 24 24">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
            </svg>
            <span>评估</span>
        </a>
    </nav>

    <script src="js/app.js"></script>
    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 下拉菜单交互
            const dropdownButtons = document.querySelectorAll('.dropdown-btn');
            
            dropdownButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    const dropdown = this.closest('.navbar-dropdown');
                    const menu = dropdown.querySelector('.dropdown-menu');
                    
                    // 切换当前下拉菜单
                    menu.classList.toggle('show');
                    
                    // 关闭其他下拉菜单
                    document.querySelectorAll('.navbar-dropdown').forEach(item => {
                        if (item !== dropdown) {
                            item.querySelector('.dropdown-menu').classList.remove('show');
                        }
                    });
                });
            });
            
            // 点击页面其他地方关闭下拉菜单
            document.addEventListener('click', function(e) {
                if (!e.target.closest('.navbar-dropdown')) {
                    document.querySelectorAll('.dropdown-menu').forEach(menu => {
                        menu.classList.remove('show');
                    });
                }
            });
            
            // 事件绑定已在app.js中处理
        });
    </script>
</body>
</html>